<template>
	<view class="rightMainBody">
		<!-- <view class="titleLogo">
			<image src="https://iflytts.oss-cn-qingdao.aliyuncs.com/qrCode/wx_2022_5_25_fxt1685326869593.png" mode="">
			</image>
		</view> -->
		<view class="topBar" >
			<u-notice-bar :duration="10" speed="50" :text="textBar"></u-notice-bar>
			
			<view class="tablist">
				<view :class="selectIndex == index ? 'select-tab' : 'noselect-tab'" v-for="(item,index) in list2"
					:key="index" @click="click(index)">
					{{item.name}}
				</view>
			</view>
		</view>
		
		<view class="content">
			<!-- <view class="text">自媒体分享方法如下:</view> -->
			<!-- <u-tabs :list="list2" @click="click"></u-tabs> -->
			
			<!-- 步骤 -->
			<view v-for="(item,index) in stepList" :key="index">
				<view class="step">
					{{ item.title }}
				</view>
				<view class="step-img">
					<image @click="viewPicture(item.img)"  :src="item.img" mode=""></image>
				</view>
			</view>

			<!-- <scroll-view class="scroll-view_H" scroll-x="true">
				<view class="scroll-view-item_H " v-for="(item, index) in gallery" :key="index">
					<image @click="viewPicture(item)" :src="item" mode="widthFix" />
				</view>
			</scroll-view> -->
			<!-- <view class="introduce">注:发布图文或视频，分享写作鱼使用体验，即可兑换1天超级会员</view> -->
			<u-popup :safe-area-inset-bottom="false" :show="showsureBtn" mode="bottom"  @close="closesureBtn">
				<view class="text2"><text>*</text>粘贴复制视频链接</view>
				<view class="inputBox">
					<u--input placeholder="粘贴图文或视频链接..." border="none" v-model="value"
						customStyle=" height: 90rpx; border-radius: 10rpx;  background: #F7F7F7; padding-left:36rpx;"></u--input>
				</view>
				<view class="submitbutton" @click="submitLink">提交审核</view>
				<view class="bottomSize"></view>
			</u-popup>
		</view>
		<view class="submitbuttons" @click="showsureBtn = true">
			<view class="getvipbtn">
				去兑换会员
			</view>
		</view>
		<!-- 手机授权 -->
		<mobilePhone :show="showBindPhone" @close="close" @onPhoneNumber="onPhoneNumber"></mobilePhone>
	</view>
</template>

<script>
	import {
		apiMixUrlApi
	} from '@/api/assemb.js';
	export default {
		data() {
			return {
				list2: [{
						name: '抖音'
					},
					{
						name: '小红书'
					},
					{
						name: '哔哩哔哩'
					},
					{
						name: '微博'
					},
					{
						name: '头条'
					}
				],
				value: '',
				userid: '',
				phoneNumber: '',
				showBindPhone: false,
				selectIndex: 0,
				stepList: [{
						title: '步骤一:制作一段含有写作鱼使用教程或者写作鱼详细介绍的视频',
						img: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/wxapp/xiezuoyu1.png',
					},
					{
						title: '步骤二:带上话题（任意选择两个以上话题）:＃AI写作，#AI智能，#人工智能，#写论文，#AI写作神器，＃写作机器人，＃AI对话，＃伪原创，＃AI机器人，＃文章生成器，#文案生成器，#办公，#职场，#AI文案，#AI写文案，#自媒体，#写作，#公文写作，#AI。',
						img: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/wxapp/xiezuoyu2.png',
					},
					{
						title: '步骤三:点击发布视频',
						img: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/invite/xiezuoyu6.png'
					}
				],
				showsureBtn:false,
				textBar:'以宣传写作鱼为主题内容，不得拿以前无关作品兑换，审核通过后至少可得3天会员，点赞量越多，兑换会员越多，最多可得终身会员。。'
			};
		},
		onShow() {},
		onLoad: function(options) {},
		methods: {
			// 关闭确认按钮弹弹窗
			closesureBtn() {
				this.showsureBtn = false;
			},
			// 判断手机号
			onPhoneNumber() {
				let baseinfo = uni.getStorageSync('baseinfo');
				if (!baseinfo.phone) {
					this.onPhoneNumber();
				} else {
					this.submitLink();
				}
			},
			close() {
				this.showBindPhone = false;
			},
			viewPicture(item) {
				let photoList = this.stepList.map(item => {
					return item.img;
				});
				uni.previewImage({
					current: item.img, // 当前显示图片的http链接
					urls:  photoList// 需要预览的图片http链接列表
				});
			},
			click(e) {
				this.selectIndex = e;
				switch (e) {
					case 0:
						this.stepList[0].title = '步骤一:制作一段含有写作鱼使用教程或者写作鱼详细介绍的视频';
						this.stepList[0].img = 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/wxapp/xiezuoyu1.png';
						this.stepList[1].img = 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/wxapp/xiezuoyu2.png';
						this.stepList[2].img = 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/invite/xiezuoyu6.png';
						break;
					case 1:
						this.stepList[0].title = '步骤一:笔记需含有写作鱼小程序图片';
						this.stepList[0].img = 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/wxapp/xiezuoyu3.png';
						this.stepList[1].img = 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/wxapp/xiezuoyu4.png';
						this.stepList[2].img = 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/invite/xiezuoyu15.png';
						break;
					case 2:
						this.stepList[0].title = '步骤一:上传一段关于写作鱼使用教程的视频';
						this.stepList[0].img = 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/wxapp/xiezuoyu5.png';
						this.stepList[1].img = 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/wxapp/xiezuoyu6.png';
						this.stepList[2].img = 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/invite/xiezuoyu3.png';
						break;
					case 3:
						this.stepList[0].title = '步骤一：发布有关写作鱼使用教程的内容';
						this.stepList[0].img = 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/wxapp/xiezuoyu7.png';
						this.stepList[1].img = 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/wxapp/xiezuoyu8.png';
						this.stepList[2].img = 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/invite/xiezuoyu12.png';
						break;
					case 4:
						this.stepList[0].title = '步骤一：发布关于写作鱼使用教程的内容';
						this.stepList[0].img = 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/wxapp/xiezuoyu9.png';
						this.stepList[1].img = 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/wxapp/xiezuoyu10.png';
						this.stepList[2].img = 'https://iflytts.oss-cn-qingdao.aliyuncs.com/images/invite/xiezuoyu9.png';
						break;
					default:
						break;
				}
			},
			submitLink() {
				if (!this.value) {
					uni.showModal({
						title: '提示',
						content: '请填写链接',
						showCancel: false,
						confirmText: '明白',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return;
				}
				let baseinfo = uni.getStorageSync('baseinfo');
				if (!baseinfo.phone) {
					this.showBindPhone = true;
				} else {
					uni.showLoading({
						title: '提交中...'
					});
					var prams = {
						type: '自媒体链接提交',
						advice: '',
						contact: baseinfo.phone, // 手机号
						url: this.value // 提交链接
					};
					apiMixUrlApi(prams, 1112, 'SendAdvice').then(json => {
						this.value = '';
						this.showsureBtn = false;
						uni.showModal({
							title: '提交成功！',
							content: '提交后三个工作日内，工作人员将会联系您，请勿重复提交！',
							showCancel: false,
							confirmText: '明白',
							success: function(res) {
								uni.hideLoading();
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					});
				}
			},
		}
	};
</script>

<style lang="scss">
	.introduce {
		margin-top: 30rpx;
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #666;
		line-height: 42rpx;
	}

	.intervalCao {
		width: 100%;
		height: 1rpx;
		background: #efefef;
		margin-bottom: 18rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 284rpx;
		height: 284rpx;
		margin-right: 20rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.rightMainBody {
		.inputBox {
			width: 639rpx;
			margin: auto;
			margin-top: 52rpx;
		}

		.text {
			font-size: 33rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #4f4f4f;
			line-height: 52rpx;
		}

		.text2 {
			width: 100%;
			font-size: 35rpx;
			font-family: PingFang SC;
			font-weight: 800;
			line-height: 57rpx;
			text-align: center;
			margin-top: 35rpx;
			
			text {
				color: #4972ff;
			}
		}

		.submitbutton {
			margin: auto;
			margin-top: 50rpx;
			width: 581rpx;
			height: 83rpx;
			background: #4972ff;
			border-radius: 13rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #ffffff;
			line-height: 83rpx;
			text-align: center;
		}
		
		.submitbuttons {
			position: fixed;
			bottom: 60rpx;
			width: 100%;
		}
		
		.getvipbtn {
			width: 581rpx;
			margin: 0 auto;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 13rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #ffffff;
			height: 83rpx;
			line-height: 83rpx;
			background: #4972ff;
		}
		
		.bottomSize {
			height: 60rpx;
		}

		.content {
			margin: auto;
			width: 719rpx -20rpx * 2;
			background: #ffffff;
			padding: 40rpx 20rpx 80rpx 20rpx;
			margin-top: 130rpx;
		}

		.titleLogo {
			width: 447rpx;
			height: 150rpx;
			margin: auto;
			margin-top: 31rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		background-image: url(https://iflytts.oss-cn-qingdao.aliyuncs.com/qrCode/wx_2022_5_25_fxt1685327592336.png);
		background-size: cover;
	}

	.leftBody {
		position: absolute;
	}

	.leftBody,
	.rightMainBody {
		overflow: auto;
	}

	.wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

		.block {
			width: 522rpx - 130rpx;
			height: 700rpx - 40rpx;
			background-image: url(https://iflytts.oss-cn-qingdao.aliyuncs.com/qrCode/wx_2022_1652946679126.png);
			background-size: cover;
			padding: 20rpx 65rpx;
			position: relative;

			.block_title {
				text-align: center;
				font-size: 36rpx;
				font-weight: 500;
				color: #323232;
				margin-top: 220rpx;
				margin-bottom: 15rpx;
			}

			.block_T {
				font-size: 28rpx;
				font-weight: bold;
				color: #505050;
				line-height: 45rpx;
			}

			.block_checkbox {
				margin: 25rpx 0 25rpx 0;
			}

			.block_btn {
				margin: auto;
				width: 387rpx;
				height: 78rpx;
				background-image: url(https://iflytts.oss-cn-qingdao.aliyuncs.com/qrCode/wx_2022_1652944486811.png);
				background-size: cover;
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #ffffff;
				text-align: center;
				line-height: 78rpx;

				.block_img {
					width: 45rpx;
					height: 45rpx;
					position: absolute;
					top: -50rpx;
					right: -30rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

	page {
		background-color: white;
	}

	.tablist {
		padding: 30rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;

		.select-tab {
			width: 125rpx;
			height: 63rpx;
			background: #5A7FFF;
			border-radius: 31rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.noselect-tab {
			width: 125rpx;
			height: 63rpx;
			background: #F5F5F5;
			border-radius: 31rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #5F5F5F;
			display: flex;
			justify-content: center;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.step {
		font-size: 31rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #343434;
		margin-top: 28rpx;
		margin-left: 30rpx;

		text {
			color: #4972FF;
		}
	}

	.step-img {
		width: 365rpx;
		height: 793rpx;
		margin: 70rpx auto;

		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.topBar {
		position: fixed;
		top: 0;
		width: 100%;
	}
</style>